<template>
    <div @click="areadata">
        <select class="pro" v-model="pid" @change="prochange()" style="width: 20%;height: 40px;
                                            outline: none;border: solid 1px #ccc; background: white;">
            <option :value="v.id" v-for="v in pro">{{v.name}}</option>
        </select>
        <select class="city" v-model="cid" @change="citychange()" style="width: 20%;height: 40px;
                                            outline: none;border: solid 1px #ccc; background: white;">
            <option :value="v.id" v-for="v in city">{{v.name}}</option>
        </select>
<!--
        <template  v-if="county.length>0">
            <select class="county" v-model="ccid">
                <option :value="v.id" v-for="v in county">{{v.name}}</option>
            </select>县/区
        </template>-->
    </div>
</template>
<style>

</style>
<script>
    import area_data from '../../../../public/static/js/area_data.js';
    export default{
        data(){
            return{
                all:area_data.area_data,
                pro:"",
                city:"",
                county:"",
                pid:"",
                cid:"",
                ccid:"",
                pname:'',
                cname:''
            }
        },
        components:{

        },
        created:function(){
            this.pro=this.all.pro;
            this.pid=this.pro[0]['id'];
            this.pname = this.pro[0]['name'];
            this.prochange();
        },
        methods:{
            prochange:function(){
                this.city=this.all.city[this.pid];
                this.cname = this.city[0]['name'];
                this.cid=this.city[0]['id'];
                this.county=this.all.county[this.cid];
            },
            citychange:function(){
                this.county=this.all.county[this.cid];
            },
            areadata: function(){
                // 子组件向父组件传递数据
                this.$emit('area',{'pro':this.pname,'city':this.cname});
            }
	    }
    }
</script>
